<template>
	<view class="page">
		<view class="white-box" v-if="common.length>0">
			<view class="box-title"><text>常用记录</text></view>
			<view class="common-list">
				<block v-for="(item,index) in common" :key="index">
					<view class="common-list_item" v-if="viewMore==true || (viewMore==false&&index<2)">
						<view class="common-list_item_left">{{item.name}}：</view>
						<view class="common-list_item_right">
							<view v-for="(brand,bi) in item.value" :key="brand.brand_id" class="common-list_item_brand"
								@click="jumpUrl(`/pages/carSource/select/series?source_type_id=${item.id}&brand_id=${brand.brand_id}`)">
								{{brand.name}}</view>
						</view>
					</view>
				</block>
			</view>
			
			<view class="view-more" v-if="viewMore && common.length>2" @click="viewMore=false">
				<text>收起</text>
				<image class="view-more_icon" src="@/static/more-blue-hide.png" mode=""></image>
			</view>
			<view class="view-more"  v-if="!viewMore && common.length>2" @click="viewMore=true">
				<text>查看更多</text>
				<image class="view-more_icon" src="@/static/more-blue-show.png" mode=""></image>
			</view>
		</view>
		<view class="white-box" v-if="list.length>0">
			<view class="box-title"><text>车源类型</text></view>
			<view class="type-list">
				<block v-for="(item,index) in list" :key="item">
					<view class="type-list_item"
						@click="jumpUrl('/pages/carSource/select/brand?source_type_id='+item.id)">{{item.name}}</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		vehicleSourceType,
		commonBrandsRecord
	} from '@/api/source.js'
	export default {
		data() {
			return {
				viewMore: false,
				common: [],
				list: [],
			};
		},
		onLoad() {
			this._commonBrandsRecord();
			this._vehicleSourceType();
		},
		methods: {
			async _commonBrandsRecord() {
				let users_id = uni.getStorageSync('login').id || 0;
				const {
					data
				} = await commonBrandsRecord({
					users_id
				});
				this.common = data
			},
			async _vehicleSourceType() {
				const {
					data
				} = await vehicleSourceType();
				this.list = data
			},
			jumpUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.white-box {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 28rpx;
		box-sizing: border-box;
	}

	.box-title {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
		margin-bottom: 22rpx;
	}

	.view-more {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #2D56C5;

		&_icon {
			margin-left: 5rpx;
			width: 16rpx;
			height: 8rpx;
		}
	}

	.common-list {
		&_item {
			display: flex;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
			border-bottom: 1rpx solid #E6E6E6;
			margin-bottom: 30rpx;

			&_left {
				padding: 14rpx 0;
				box-sizing: border-box;
			}

			&_right {
				flex: 1;
				display: flex;
				flex-wrap: wrap;
			}

			&_brand {
				background: #F7F8FA;
				border-radius: 25rpx;
				padding: 14rpx 25rpx;
				box-sizing: border-box;
				margin: 0 20rpx 20rpx 0;
			}
		}

		&_item:last-child {
			border: none;
		}
	}

	.type-list {
		&_item {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
			border-bottom: 1rpx solid #E6E6E6;
			padding: 30rpx 0;
			box-sizing: border-box;
		}

		&_item:last-child {
			border: none;
		}
	}
</style>